<template>
    <div class="report-cover">
        <div class="floor-cover">
            <div class="house-cover">
                <div class="shine shine2">
                </div>
                <div class="report-title"></div>
                <div class="report-light-box">
                    <div class="report-light"></div>
                    <div class="report-module"></div>
                </div>
                <!--三个柱子-->
                <div class="column-left-box">
                    <div class="column"></div>
                </div>
                <div class="column-middle-box">
                    <div class="column"></div>
                </div>
                <div class="column-right-box">
                    <div class="column"></div>
                </div>
                <!--三类虚线-->
                <div class="container-show-1">
                    <div class="broken-1">
                        <div class="broken"></div>
                    </div>
                    <div class="dotted-1"></div>
                    <i class="dot-1"></i>
                </div>
                <div class="container-show-2">
                    <div class="broken-2">
                        <div class="broken"></div>
                    </div>
                    <div class="dotted-2"></div>
                    <i class="dot-2"></i>
                </div>
                <div class="container-show-3">
                    <div class="broken-3">
                        <div class="broken"></div>
                    </div>
                    <div class="dotted-3"></div>
                </div>
                <!--四颗星星-->
                <div class="cover-star star-1"></div>
                <div class="cover-star star-2"></div>
                <div class="cover-star star-3"></div>
                <div class="cover-star star-4"></div>
            </div>
        </div>
    </div>
</template>

<script type="text/javascript">
    export default {
        props: {
        },
        data () {
            return {
            }
        },
        mounted () {
        },
        components:{}
    }
</script>
<style lang='scss' rel="stylesheet/scss">

    .publickPostion{
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: absolute;
    }

    .report-cover{
        background-image: url("../../assets/images/monitor-bg.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        width: 100%;
        height: 100%;
        .floor-cover{
            background-image: url("../../assets/images/floor-bg.png");
            background-repeat: no-repeat;
            background-size: 100% 100%;
            width: 100%;
            height: 100%;
        }
        .house-cover{
            background-image: url("../../assets/images/house-bg.png");
            background-repeat: no-repeat;
            background-size: 100% 100%;
            width: 100%;
            height: 100%;
        }
        .report-title{
            width: 25%;
            height: 36%;
            background-image: url("../../assets/images/cover-title.png");
            @extend .publickPostion;
            top: 15%;
            left: 14%;
        }
        .report-light-box{
            width: 9.2%;
            height: 47.6%;
            position: absolute;
            left: 45.0%;
            top: 9.4%;
            overflow: hidden;
            .report-light{
                width: 100%;
                height:100%;
                background-image: url("../../assets/images/cover-light.png");
                @extend .publickPostion;
                z-index: 20;
                top: 100%;
            }
            .report-module{
                width: 40%;
                height: 72%;
                background-image: url("../../assets/images/cover-module.png");;
                @extend .publickPostion;
                z-index: 10;
                left: 30%;
                top: 100%;
            }
        }
        .column-left-box{
            width: 1.8%;
            height: 8%;
            position: absolute;
            bottom: 19%;
            left: 28%;
            overflow: hidden;
            .column{
                width: 100%;
                height: 100%;
                background-image: url("../../assets/images/column_left.png");
                @extend .publickPostion;
                top: 100%;
            }
        }
        .column-middle-box{
            width: 2%;
            height: 3.6%;
            position: absolute;
            bottom: 13%;
            left: 49%;
            overflow: hidden;
            .column{
                width: 100%;
                height: 100%;
                background-image: url("../../assets/images/column_middle.png");
                @extend .publickPostion;
                top: 100%;
            }
        }
        .column-right-box{
            width: 2%;
            height: 5%;
            position: absolute;
            bottom: 24%;
            right: 25%;
            overflow: hidden;
            .column{
                width: 100%;
                height: 100%;
                background-image: url("../../assets/images/column_right.png");
                @extend .publickPostion;
                top: 100%;
            }
        }
        .container-show-1{
            width: 21%;
            height: 8.5%;
            top: 66%;
            position: absolute;
            overflow: hidden;
            .broken-1{
                width: 51%;
                height: 40%;
                left: 30%;
                top: 6%;
                position: absolute;
                overflow: hidden;
                .broken{
                    width: 100%;
                    height: 100%;
                    left: -100%;
                    background-image: url("../../assets/images/broken_1.png");
                    @extend .publickPostion;
                }
            }
            .dotted-1{
                width: 2%;
                height: 79%;
                right: 6%;
                top: 187%;
                background-image: url("../../assets/images/dotted_1.png");
                @extend .publickPostion;
            }
            .dot-1{
                width: 10px;
                height: 10px;
                border-radius: 10px;
                background: #809c9b;
                position: absolute;
                right: 7%;
                margin-right: -5px;
                bottom: 0;
                opacity: 0;
            }
        }
        .container-show-2{
            width: 26%;
            height: 8.5%;
            top: 82.5%;
            left: 49.5%;
            position: absolute;
            overflow: hidden;
            .broken-2{
                width: 35%;
                height: 40%;
                left: 60%;
                position: absolute;
                overflow: hidden;
                .broken{
                    width: 100%;
                    height: 100%;
                    left: -100%;
                    background-image: url("../../assets/images/broken_2.png");
                    @extend .publickPostion;
                }
            }
            .dotted-2{
                width: 48%;
                height: 2%;
                left: -50%;
                top: 5px;
                background-image: url("../../assets/images/dotted_2.png");
                @extend .publickPostion;
            }
            .dot-2{
                width: 10px;
                height: 10px;
                border-radius: 10px;
                background: #2eeec9;
                position: absolute;
                opacity: 0;
            }
        }
        .container-show-3{
            width: 30%;
            height: 8.5%;
            top: 51.5%;
            left: 62%;
            position: absolute;
            overflow: hidden;
            .broken-3{
                width: 44%;
                height: 40%;
                left: 54%;
                position: absolute;
                overflow: hidden;
                .broken{
                    width: 100%;
                    height: 100%;
                    left: -100%;
                    background-image: url("../../assets/images/broken_3.png");
                    @extend .publickPostion;
                }
            }
            .dotted-3{
                width: 42%;
                height: 2%;
                left: -42%;
                top: 5px;
                background-image: url("../../assets/images/dotted_3.png");
                @extend .publickPostion;
            }
        }
        .cover-star{
            width: 3rem;
            height: 3rem;
            background-image: url("../../assets/images/star.png");
            @extend .publickPostion;
            background-position: center;
            animation: opacity-change 1s ease-in-out infinite;
            &.star-1{
                top: 63.5%;
                left: 5%;
            }
            &.star-2{
                top: 65.5%;
                left: 31%;
            }
            &.star-3{
                top: 50%;
                left: 59%;
            }
            &.star-4{
                top: 43%;
                right: 9.5%;
            }
        }
    }



    .showCurrentPageModule{
        .report-title{
            animation: reportTitleAni 4s infinite linear;
            animation-fill-mode: forwards;
        }
        .report-light-box{
            .report-light{
                animation: reportLight 0.5s linear;
                animation-fill-mode: forwards;
            }
            .report-module{
                animation: reportModule 1s linear 0.5s;
                animation-fill-mode: forwards;
            }
        }
        .column-left-box{
            .column{
                animation: reportLight 0.5s linear;
                animation-fill-mode: forwards;
            }
        }
        .column-middle-box{
            .column{
                animation: reportLight 0.5s linear;
                animation-fill-mode: forwards;
            }
        }
        .column-right-box{
            .column{
                animation: reportLight 0.5s linear;
                animation-fill-mode: forwards;
            }
        }
        .container-show-1{
            .broken-1{
                .broken{
                    animation: coverBrokenAni 0.5s linear 1s;
                    animation-fill-mode: forwards;
                }
            }
            .dotted-1{
                animation: dotted1 0.5s linear 0.5s;
                animation-fill-mode: forwards;
            }
            .dot-1{
                animation: defaultOpacityAni 0.5s linear 0.5s;
                animation-fill-mode: forwards;
            }
        }
        .container-show-2{
            .broken-2{
                .broken{
                    animation: coverBrokenAni 0.5s linear 1s;
                    animation-fill-mode: forwards;
                }
            }
            .dotted-2{
                animation: dotted2 0.5s linear 0.5s;
                animation-fill-mode: forwards;
            }
            .dot-2{
                animation: defaultOpacityAni 0.5s linear 0.5s;
                animation-fill-mode: forwards;
            }
        }
        .container-show-3{
            .broken-3{
                .broken{
                    animation: coverBrokenAni 0.5s linear 1s;
                    animation-fill-mode: forwards;
                }
            }
            .dotted-3{
                animation: dotted3 0.5s linear 0.5s;
                animation-fill-mode: forwards;
            }
        }

    }
    @keyframes reportTitleAni {
        50%{
            top: 16%;
        }
        100%{
            top: 15%;
        }
    }
    @keyframes reportLight {
        100%{
            top: 0;
        }
    }
    @keyframes reportModule {
        100%{
            top: 18%;
        }
    }
    @keyframes coverBrokenAni {
        100%{
            left: 0;
        }
    }

    @keyframes dotted1 {
        100%{
            top: 0;
        }
    }
    @keyframes dotted2 {
        100%{
            left: 20px;
        }
    }
    @keyframes dotted3 {
        100%{
            left: 20px;
        }
    }

    @keyframes opacity-change {
        0% {
            opacity: 0;
        }
        50% {
            opacity: 1;
        }
        100% {
            opacity: 0;
        }
    }

</style>